<template>
  <rx-layout>
    <div slot="center">
      <a-form :form="form" style="height: 100%;">
        <a-row>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.size','字符长度')">
              <a-input-number :placeholder="i18n('form.size','字符长度')" :min="0" :max="4000" v-decorator="['maxLength',{rules: [{ required: true, message:i18n('form.size','字符长度','input')}] }]"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.required','是否必填')">
              <a-checkbox  :placeholder="i18n('form.required','是否必填')" v-decorator="['required']" :checked="mdl.required" @change="changeData($event,'required')"></a-checkbox>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.default','默认值')">
              <a-input :placeholder="i18n('form.default','默认值')" v-decorator="['value']"/>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item :label-col="labelCol" :wrapper-col="wrapperCol" :label="i18n('form.validRules','校验规则')">
              <a-select allowClear :placeholder="i18n('form.validRules','校验规则')"  v-decorator="['rules']" :options="ruleDatas" @change="ruleChange"></a-select>
              <a-input style="display: none;" v-decorator="['regular']" />
              <a-input style="display: none;" v-decorator="['prompt']" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>
  </rx-layout>
</template>

<script>
    import FormRuleApi from "@/api/form/core/formRule";
    import {App} from "@lowcode/jpaas-common-lib";
    export default {
        name: "rowControl_input",
        mixins: [App],
        data(){
          return {
            labelCol: { span:6 },
            wrapperCol: { span:18 },
            labelCol1: { span:3 },
            wrapperCol1: { span:19 },
            form: this.$form.createForm(this),
            mdl:{},
            ruleDatas:[]
          }
        },
      methods:{
          i18n(name, text, key) {
              return this.$ti18(name, text, "rowControls", key);
          },
          setData(controlConf){
          this.mdl=controlConf;
          this.form.setFieldsValue(this.mdl);
          let params ={};
          let appId = this.curApp.appId;
          if (appId) {
              params.params={
                  "Q_APP_ID__S_IN" :appId + ",0"
              };
          }
          FormRuleApi.queryList(params).then(res=>{
              this.ruleDatas=res.data.map(item=>{
                  return {label:item.name,value:item.alias,...item}
              })
          })
        },
        validate(callback){
          var self=this;
          this.form.validateFields((err, values) => {
            if(err){
              return;
            }
            self.mdl=values;
            callback();
          });
        },
        getData(){
          return this.mdl;
        },
        changeData(e,field){
          this.mdl[field]=e.target.checked;
        },
        ruleChange(value,option){
            var regular='';
            var prompt='';
            if(value){
                var obj=option.data.props;
                regular=obj.regular;
                prompt=obj.prompt;
            }
            this.form.setFieldsValue({regular:regular,prompt:prompt});
        }
      }
    }
</script>

<style scoped>

</style>